<template>
	<view class="container">
		<!-- 首页内容 -->
		<view v-if="activeTab === 'home'" class="home-page">
			<!-- 顶部标题栏 -->
			<view class="header">
				<text class="header-title">我的账本</text>
			</view>
			<!-- 主内容区域 -->
			<scroll-view class="main-content" scroll-y>
				<!-- 收支概览卡片 -->
				<view class="overview-card">
					<view class="balance-section">
						<text class="balance-label">本月余额</text>
						<text class="balance-amount">¥{{ balance.toFixed(2) }}</text>
					</view>
					<view class="income-expense-row">
						<view class="income-section">
							<text class="amount-label">收入</text>
							<text class="income-amount">¥{{ monthlyIncome.toFixed(2) }}</text>
						</view>
						<view class="expense-section">
							<text class="amount-label">支出</text>
							<text class="expense-amount">¥{{ monthlyExpense.toFixed(2) }}</text>
						</view>
					</view>
					<!-- 预算进度条 -->
					<view class="budget-section">
						<view class="budget-header">
							<text class="budget-label">本月预算</text>
							<text class="budget-amount">¥{{ budget.toFixed(2) }}</text>
						</view>
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: budgetProgress + '%' }"></view>
						</view>
						<text class="budget-usage">已使用 {{ budgetProgress.toFixed(1) }}%</text>
					</view>
				</view>
				<!-- 分类统计 -->
				<view class="category-section">
					<text class="section-title">分类统计</text>
					<scroll-view class="category-scroll" scroll-x>
						<view class="category-item" v-for="category in categories" :key="category.id">
							<view class="category-icon" :style="{ backgroundColor: category.color }">
								<uni-icons :type="category.icon" size="24" color="#fff"></uni-icons>
							</view>
							<text class="category-name">{{ category.name }}</text>
							<text class="category-amount">¥{{ category.amount.toFixed(2) }}</text>
						</view>
					</scroll-view>
				</view>
				<!-- 近期账单 -->
				<view class="bills-section">
					<view class="bills-header">
						<text class="section-title">近期账单</text>
						<!-- <text class="view-all cursor-pointer">查看全部</text> -->
					</view>
					<!-- 有账单数据时显示账单列表 -->
					<view v-if="recentBills.length > 0">
						<view class="bill-item" v-for="bill in recentBills" :key="bill.id">
							<view class="bill-icon" :style="{ backgroundColor: bill.categoryColor }">
								<uni-icons :type="bill.categoryIcon" size="20" color="#fff"></uni-icons>
							</view>
							<view class="bill-info">
								<text class="bill-category">{{ bill.category }}</text>
								<text class="bill-note">{{ bill.note }}</text>
							</view>
							<view class="bill-amount-section">
								<text class="bill-amount" :class="bill.type === 'income' ? 'income' : 'expense'">
									{{ bill.type === 'income' ? '+' : '-' }}¥{{ bill.amount.toFixed(2) }}
								</text>
								<text class="bill-date">{{ bill.date }}</text>
							</view>
						</view>
					</view>
					<!-- 没有账单数据时显示缺省提醒 -->
					<view v-else class="empty-bills">
						<view class="empty-icon">
							<uni-icons type="wallet" size="48" color="#CCCCCC"></uni-icons>
						</view>
						<text class="empty-text">暂无账单记录</text>
						<text class="empty-subtext">点击下方"+"按钮开始记账</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 统计页面 -->
		<view v-if="activeTab === 'stats'" class="stats-page">
			<!-- 顶部标题栏 -->
			<view class="header">
				<text class="header-title">统计分析</text>
				<!-- <uni-icons type="gear" size="20" color="#666" class="cursor-pointer"></uni-icons> -->
			</view>
			<scroll-view class="stats-content" scroll-y>
				<!-- <view class="time-range-selector">
					<view v-for="range in ['week', 'month', 'year']" :key="range" class="range-item"
						:class="{ active: selectedTimeRange === range }" @click="selectedTimeRange = range">
						{{ range === 'week' ? '周' : range === 'month' ? '月' : '年' }}
					</view>
				</view> -->
				<view class="stats-overview">
					<view class="stats-card">
						<text class="stats-label">总支出</text>
						<text class="stats-amount expense">¥{{ monthlyExpense.toFixed(2) }}</text>
					</view>
					<view class="stats-card">
						<text class="stats-label">总收入</text>
						<text class="stats-amount income">¥{{ monthlyIncome.toFixed(2) }}</text>
					</view>
				</view>
				<view class="chart-section">
					<text class="section-title">支出分析</text>
					<!-- 有支出数据时显示图表 -->
					<view v-if="categories.length > 0">
						<view class="expense-chart">
							<view v-for="category in categories" :key="category.id" class="chart-bar"
								@click="showCategoryDetail(category)">
								<view class="bar-fill" :style="{
									height: (category.amount / Math.max(...categories.map(c => c.amount)) * 200) + 'rpx',
									backgroundColor: category.color
								}"></view>
								<text class="bar-label">{{ category.name }}</text>
							</view>
						</view>
						<view class="chart-detail" v-if="selectedCategory">
							{{ selectedCategory.name }}: ¥{{ selectedCategory.amount.toFixed(2) }}
							({{ (selectedCategory.amount / monthlyExpense * 100).toFixed(1) }}%)
						</view>
					</view>
					<!-- 没有支出数据时显示缺省提醒 -->
					<view v-else class="empty-chart">
						<view class="empty-chart-icon">
							<uni-icons type="bars" size="48" color="#CCCCCC"></uni-icons>
						</view>
						<text class="empty-chart-text">暂无支出数据</text>
						<text class="empty-chart-subtext">开始记账后即可查看支出分析</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 预算页面 -->
		<view v-if="activeTab === 'budget'" class="budget-page">
			<!-- 顶部标题栏 -->
			<view class="header">
				<text class="header-title">预算管理</text>
				<uni-icons type="gear" size="20" color="#666" class="cursor-pointer"></uni-icons>
			</view>
			<scroll-view class="budget-content" scroll-y>
				<view class="budget-overview-card">
					<text class="budget-title">本月预算</text>
					<text class="budget-amount">¥{{ budget.toFixed(2) }}</text>
					<view class="budget-progress">
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: budgetProgress + '%' }"></view>
						</view>
						<text class="progress-text">已使用 {{ budgetProgress.toFixed(1) }}%</text>
					</view>
				</view>
				<view class="budget-categories">
					<text class="section-title">分类预算</text>
					<view v-for="category in expenseCategories" :key="category.id" class="budget-category-item"
						:class="{ active: selectedBudgetCategory === category.id }"
						@click="selectedBudgetCategory = category.id">
						<view class="category-info">
							<view class="category-icon" :style="{ backgroundColor: category.color }">
								<uni-icons :type="category.icon" size="20" color="#fff"></uni-icons>
							</view>
							<text class="category-name">{{ category.name }}</text>
						</view>
						<text class="category-budget">¥{{ (budget / expenseCategories.length).toFixed(2) }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 我的页面 -->
		<view v-if="activeTab === 'profile'" class="profile-page">
			<scroll-view class="profile-content" scroll-y>
				<view class="menu-list">
					<view class="menu-item cursor-pointer" @click="openBudgetModal">
						<view class="menu-icon">
							<uni-icons type="gear" size="24" color="#6E7FF3"></uni-icons>
						</view>
						<text class="menu-text">预算设置</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
					<view class="menu-item cursor-pointer" @click="openBudgetModal3">
						<view class="menu-icon">
							<uni-icons type="compose" size="24" color="#6E7FF3"></uni-icons>
						</view>
						<text class="menu-text">举报反馈</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
					<view class="menu-item cursor-pointer" @click="openBudgetModal1">
						<view class="menu-icon">
							<uni-icons type="chatboxes" size="24" color="#6E7FF3"></uni-icons>
						</view>
						<text class="menu-text">用户协议</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
					<view class="menu-item cursor-pointer" @click="openBudgetModal2">
						<view class="menu-icon">
							<uni-icons type="info" size="24" color="#6E7FF3"></uni-icons>
						</view>
						<text class="menu-text">隐私政策</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 记账弹窗 -->
		<view class="add-bill-modal" v-if="showAddModal" @click="closeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">记一笔</text>
					<uni-icons type="close" size="20" color="#666" class="cursor-pointer"
						@click="closeModal"></uni-icons>
				</view>
				<view class="type-tabs">
					<view class="tab-item" :class="{ active: newBill.type === 'expense' }"
						@click="newBill.type = 'expense'">
						<text>支出</text>
					</view>
					<view class="tab-item" :class="{ active: newBill.type === 'income' }"
						@click="newBill.type = 'income'">
						<text>收入</text>
					</view>
				</view>
				<view class="amount-input-section">
					<text class="currency-symbol">¥</text>
					<input 
						class="amount-input" 
						v-model="newBill.amount" 
						placeholder="0.00" 
						maxlength="10"
					/>
				</view>
				<view class="category-grid">
					<view class="grid-item cursor-pointer"
						v-for="cat in (newBill.type === 'expense' ? expenseCategories : incomeCategories)" :key="cat.id"
						:class="{ selected: newBill.categoryId === cat.id }" @click="selectCategory(cat)">
						<view class="grid-icon" :style="{ backgroundColor: cat.color }">
							<uni-icons :type="cat.icon" size="20" color="#fff"></uni-icons>
						</view>
						<text class="grid-name">{{ cat.name }}</text>
					</view>
				</view>
				<input class="note-input" v-model="newBill.note" placeholder="添加备注..." />
				<view class="modal-actions">
					<button class="cancel-btn" @click="closeModal">取消</button>
					<button class="confirm-btn cursor-pointer" @click="addBill">确认</button>
				</view>
			</view>
		</view>

		<!-- 预算设置弹窗 -->
		<view class="budget-setting-modal" v-if="showBudgetModal" @click="closeBudgetModal">
			<view class="budget-modal-content" @click.stop>
				<view class="budget-modal-header">
					<text class="budget-modal-title">设置本月预算</text>
					<uni-icons type="close" size="20" color="#666" class="cursor-pointer"
						@click="closeBudgetModal"></uni-icons>
				</view>
				<view class="budget-input-section">
					<text class="budget-input-label">本月预算金额</text>
					<view class="budget-input-wrapper">
						<text class="budget-currency-symbol">¥</text>
						<input 
							class="budget-input" 
							type="digit" 
							v-model="budgetInput" 
							placeholder="请输入预算金额" 
							@input="onBudgetInput"
							maxlength="10"
						/>
					</view>
				</view>
				<view class="budget-modal-actions">
					<button class="budget-cancel-btn" @click="closeBudgetModal">取消</button>
					<button class="budget-confirm-btn cursor-pointer" @click="saveBudget">确认</button>
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<view class="bottom-nav">
			<view class="nav-item cursor-pointer" :class="{ active: activeTab === 'home' }" @click="activeTab = 'home'">
				<uni-icons type="home" size="22" :color="activeTab === 'home' ? '#6E7FF3' : '#999'"></uni-icons>
				<text>首页</text>
			</view>
			<view class="nav-item cursor-pointer" :class="{ active: activeTab === 'stats' }"
				@click="activeTab = 'stats'">
				<uni-icons type="bars" size="22" :color="activeTab === 'stats' ? '#6E7FF3' : '#999'"></uni-icons>
				<text>统计</text>
			</view>
			<view class="nav-item add-btn cursor-pointer" @click="showAddModal = true">
				<view class="add-icon">
					<uni-icons type="plus" size="24" color="#fff"></uni-icons>
				</view>
				<text>记账</text>
			</view>
			<view class="nav-item cursor-pointer" :class="{ active: activeTab === 'budget' }"
				@click="activeTab = 'budget'">
				<uni-icons type="wallet" size="22" :color="activeTab === 'budget' ? '#6E7FF3' : '#999'"></uni-icons>
				<text>预算</text>
			</view>
			<view class="nav-item cursor-pointer" :class="{ active: activeTab === 'profile' }"
				@click="activeTab = 'profile'">
				<uni-icons type="person" size="22" :color="activeTab === 'profile' ? '#6E7FF3' : '#999'"></uni-icons>
				<text>我的</text>
			</view>
		</view>

		<!-- 隐私政策弹窗组件 -->
		<privacy-modal :visible="showPrivacyModal" @privacy-policy="onPrivacyPolicy"
			@privacy-confirm="onPrivacyConfirm" />
	</view>
</template>
<script>
import PrivacyModal from './modal.vue'
export default {
	components: {
		PrivacyModal
	},
	data() {
		return {
			activeTab: 'home',
			showAddModal: false,
			budget: 5000,
			selectedTimeRange: 'month',
			selectedBudgetCategory: '',
			selectedCategory: null,
			newBill: {
				type: 'expense',
				amount: '',
				categoryId: '',
				note: ''
			},
			expenseCategories: [
				{ id: '1', name: '餐饮', icon: 'shop', color: '#FF6B6B' },
				{ id: '2', name: '交通', icon: 'navigate', color: '#4ECDC4' },
				{ id: '3', name: '购物', icon: 'cart', color: '#45B7D1' },
				{ id: '4', name: '娱乐', icon: 'videocam', color: '#F7DC6F' },
				{ id: '5', name: '医疗', icon: 'heart', color: '#BB8FCE' },
				{ id: '6', name: '教育', icon: 'map', color: '#85C1E9' },
				{ id: '7', name: '住房', icon: 'home', color: '#F8C471' },
				{ id: '8', name: '其他', icon: 'more', color: '#AED6F1' }
			],
			incomeCategories: [
				{ id: '9', name: '工资', icon: 'wallet', color: '#58D68D' },
				{ id: '10', name: '奖金', icon: 'gift', color: '#F4D03F' },
				{ id: '11', name: '投资', icon: 'up', color: '#5DADE2' },
				{ id: '12', name: '兼职', icon: 'work', color: '#AF7AC5' },
				{ id: '13', name: '其他', icon: 'more', color: '#82E0AA' }
			],
			bills: [],
			showPrivacyModal: false,
			showBudgetModal: false,
			budgetInput: '',
		}
	},
	computed: {
		monthlyIncome() {
			const currentMonth = new Date().getMonth()
			const currentYear = new Date().getFullYear()
			return this.bills
				.filter(bill => {
					const billDate = new Date(bill.timestamp)
					return bill.type === 'income' &&
						billDate.getMonth() === currentMonth &&
						billDate.getFullYear() === currentYear
				})
				.reduce((sum, bill) => sum + bill.amount, 0)
		},
		monthlyExpense() {
			const currentMonth = new Date().getMonth()
			const currentYear = new Date().getFullYear()
			return this.bills
				.filter(bill => {
					const billDate = new Date(bill.timestamp)
					return bill.type === 'expense' &&
						billDate.getMonth() === currentMonth &&
						billDate.getFullYear() === currentYear
				})
				.reduce((sum, bill) => sum + bill.amount, 0)
		},
		balance() {
			return this.monthlyIncome - this.monthlyExpense
		},
		budgetProgress() {
			return this.budget > 0 ? Math.min((this.monthlyExpense / this.budget) * 100, 100) : 0
		},
		categories() {
			const categoryStats = {}
			const startTimestamp = this.getTimeRangeFilter(this.selectedTimeRange)
			this.bills
				.filter(bill => {
					return bill.type === 'expense' && bill.timestamp >= startTimestamp
				})
				.forEach(bill => {
					if (!categoryStats[bill.categoryId]) {
						categoryStats[bill.categoryId] = {
							id: bill.categoryId,
							name: bill.category,
							icon: bill.categoryIcon,
							color: bill.categoryColor,
							amount: 0
						}
					}
					categoryStats[bill.categoryId].amount += bill.amount
				})
			return Object.values(categoryStats).sort((a, b) => b.amount - a.amount).slice(0, 6)
		},
		recentBills() {
			return this.bills
				.sort((a, b) => b.timestamp - a.timestamp)
				.slice(0, 10)
		}
	},
	mounted() {
		this.loadBills()
	},
	onShow() {
		this.showPrivacyPolicyModal();
	},
	methods: {
		showPrivacyPolicyModal() {
			const shown = uni.getStorageSync('privacyPolicyShown777');
			if (!shown) {
				this.showPrivacyModal = true;
			}
		},
		onPrivacyConfirm() {
			uni.setStorageSync('privacyPolicyShown777', true);
			this.showPrivacyModal = false;
		},
		getTimeRangeFilter(range) {
			const now = new Date()
			const startDate = new Date()
			switch (range) {
				case 'week':
					startDate.setDate(now.getDate() - 7)
					break
				case 'month':
					startDate.setMonth(now.getMonth())
					startDate.setDate(1)
					break
				case 'year':
					startDate.setMonth(0)
					startDate.setDate(1)
					break
			}
			return startDate.getTime()
		},
		selectCategory(category) {
			console.log('selectCategory called with:', category)
			this.newBill.categoryId = category.id
			console.log('newBill.categoryId set to:', this.newBill.categoryId)
		},
		addBill() {
			if (!this.newBill.amount || !this.newBill.categoryId) {
				console.log('Validation failed: amount or categoryId is missing')
				uni.showToast({
					title: '请填写金额和选择分类',
					icon: 'none'
				})
				return
			}
			
			// 验证金额是否为正数
			const amount = parseFloat(this.newBill.amount)
			if (isNaN(amount) || amount <= 0) {
				uni.showToast({
					title: '请输入正确的金额（大于0）',
					icon: 'none'
				})
				return
			}
			
			const categories = this.newBill.type === 'expense' ? this.expenseCategories : this.incomeCategories
			const selectedCategory = categories.find(cat => cat.id === this.newBill.categoryId)
			
			if (!selectedCategory) {
				console.log('Selected category not found')
				uni.showToast({
					title: '选择的分类不存在',
					icon: 'none'
				})
				return
			}

			const bill = {
				id: Date.now().toString(),
				type: this.newBill.type,
				amount: amount,
				categoryId: this.newBill.categoryId,
				category: selectedCategory.name,
				categoryIcon: selectedCategory.icon,
				categoryColor: selectedCategory.color,
				note: this.newBill.note || selectedCategory.name,
				date: new Date().toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }),
				timestamp: Date.now()
			}
			
			console.log('Adding bill:', bill)
			this.bills.push(bill)
			this.saveBills()
			
			uni.showToast({
				title: '记账成功',
				icon: 'success'
			})
			
			this.closeModal()
		},
		showCategoryDetail(category) {
			this.selectedCategory = category
			setTimeout(() => {
				this.selectedCategory = null
			}, 3000)
		},
		exportData() {
			const data = {
				timeRange: this.selectedTimeRange,
				totalExpense: this.monthlyExpense,
				totalIncome: this.monthlyIncome,
				categories: this.categories,
				timestamp: new Date().toISOString()
			}
			uni.downloadFile({
				url: 'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data)),
				success: (res) => {
					uni.saveFile({
						tempFilePath: res.tempFilePath,
						success: (res) => {
							uni.showToast({
								title: '导出成功',
								icon: 'success'
							})
						}
					})
				}
			})
		},
		closeModal() {
			console.log('closeModal called')
			this.showAddModal = false
			this.newBill = {
				type: 'expense',
				amount: '',
				categoryId: '',
				note: ''
			}
			console.log('newBill reset to:', this.newBill)
		},
		saveBills() {
			uni.setStorageSync('bills', this.bills)
			uni.setStorageSync('budget', this.budget)
		},
		loadBills() {
			const savedBills = uni.getStorageSync('bills')
			const savedBudget = uni.getStorageSync('budget')
			if (savedBills) {
				this.bills = savedBills
			}
			if (savedBudget) {
				this.budget = savedBudget
			}
		},
		onAmountInput(e) {
			console.log('onAmountInput called with:', e.detail.value)
			let value = e.detail.value
			
			// 只允许输入数字和小数点
			value = value.replace(/[^\d.]/g, '')
			
			// 确保只有一个小数点
			const dotIndex = value.indexOf('.')
			if (dotIndex !== -1) {
				const beforeDot = value.substring(0, dotIndex)
				const afterDot = value.substring(dotIndex + 1)
				// 限制小数点后最多2位
				if (afterDot.length > 2) {
					value = beforeDot + '.' + afterDot.substring(0, 2)
				}
			}
			
			// 限制整数部分长度
			if (dotIndex === -1 && value.length > 8) {
				value = value.substring(0, 8)
			} else if (dotIndex !== -1 && dotIndex > 8) {
				value = value.substring(0, 8) + value.substring(dotIndex)
			}
			
			// 防止以小数点开头
			if (value.startsWith('.')) {
				value = '0' + value
			}
			
			this.newBill.amount = value
			console.log('newBill.amount set to:', this.newBill.amount)
		},
		openBudgetModal() {
			this.budgetInput = this.budget.toFixed(2)
			this.showBudgetModal = true
		},
		openBudgetModal1() {
			uni.navigateTo({
				url: '/pages/xieyi'
			})
		},
		openBudgetModal2() {
			uni.navigateTo({
				url: '/pages/yinsi'
			})
		},
		openBudgetModal3() {
			uni.navigateTo({
				url: '/pages/feedback'
			})
		},
		closeBudgetModal() {
			this.showBudgetModal = false
			this.budgetInput = ''
		},
		onBudgetInput(e) {
			let value = e.detail.value
			value = value.replace(/[^\d.]/g, '')
			const dotIndex = value.indexOf('.')
			if (dotIndex !== -1) {
				const beforeDot = value.substring(0, dotIndex)
				const afterDot = value.substring(dotIndex + 1)
				if (afterDot.length > 2) {
					value = beforeDot + '.' + afterDot.substring(0, 2)
				}
			}
			if (dotIndex === -1 && value.length > 8) {
				value = value.substring(0, 8)
			} else if (dotIndex !== -1 && dotIndex > 8) {
				value = value.substring(0, 8) + value.substring(dotIndex)
			}
			if (value.startsWith('.')) {
				value = '0' + value
			}
			this.budgetInput = value
		},
		saveBudget() {
			const newBudget = parseFloat(this.budgetInput)
			if (!isNaN(newBudget) && newBudget >= 0) {
				this.budget = newBudget
				this.saveBills()
				this.closeBudgetModal()
				uni.showToast({
					title: '预算设置成功',
					icon: 'success'
				})
			} else {
				uni.showToast({
					title: '请输入有效的预算金额',
					icon: 'none'
				})
			}
		}
	}
}
</script>
<style>
page {
	height: 100%;
}

.cursor-pointer {
	cursor: pointer;
}

.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #F8F9FE 0%, #FFFFFF 100%);
}

.home-page {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 32rpx;
	background: linear-gradient(135deg, #F8F9FE 0%, #FFFFFF 100%);
}

.header-title {
	font-size: 18px;
	font-weight: 600;
	color: #333;
}

.main-content {
	flex: 1;
	overflow: auto;
	padding: 0 32rpx;
	box-sizing: border-box;
}

.overview-card {
	background: linear-gradient(135deg, #6E7FF3 0%, #8B9BFF 100%);
	border-radius: 24rpx;
	padding: 48rpx 32rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 8rpx 32rpx rgba(110, 127, 243, 0.2);
}

.balance-section {
	text-align: center;
	margin-bottom: 32rpx;
}

.balance-label {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
	display: block;
	margin-bottom: 8rpx;
}

.balance-amount {
	font-size: 32px;
	font-weight: bold;
	color: #fff;
	display: block;
}

.income-expense-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 32rpx;
}

.income-section,
.expense-section {
	text-align: center;
}

.amount-label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	display: block;
	margin-bottom: 8rpx;
}

.income-amount,
.expense-amount {
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	display: block;
}

.budget-section {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 16rpx;
	padding: 24rpx;
}

.budget-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
}

.budget-label {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
}

.budget-amount {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

.progress-bar {
	height: 8rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4rpx;
	overflow: hidden;
	margin-bottom: 12rpx;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #FFB88C 0%, #FF9A6B 100%);
	border-radius: 4rpx;
	transition: width 0.3s ease;
}

.budget-usage {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	display: block;
}

.category-section {
	margin-bottom: 32rpx;
}

.section-title {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	margin-bottom: 24rpx;
	display: block;
}

.category-scroll {
	white-space: nowrap;
}

.category-item {
	display: inline-block;
	text-align: center;
	margin-right: 24rpx;
	width: 120rpx;
}

.category-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12rpx;
}

.category-name {
	font-size: 12px;
	color: #666;
	display: block;
	margin-bottom: 4rpx;
}

.category-amount {
	font-size: 14px;
	font-weight: 600;
	color: #333;
	display: block;
}

.bills-section {
	margin-bottom: 120rpx;
}

.bills-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
}

.view-all {
	font-size: 14px;
	color: #6E7FF3;
}

.bill-item {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 16rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
}

.bill-icon {
	width: 64rpx;
	height: 64rpx;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
	flex-shrink: 0;
}

.bill-info {
	flex: 1;
}

.bill-category {
	font-size: 16px;
	font-weight: 500;
	color: #333;
	display: block;
	margin-bottom: 4rpx;
}

.bill-note {
	font-size: 12px;
	color: #999;
	display: block;
}

.bill-amount-section {
	text-align: right;
}

.bill-amount {
	font-size: 16px;
	font-weight: 600;
	display: block;
	margin-bottom: 4rpx;
}

.bill-amount.income {
	color: #58D68D;
}

.bill-amount.expense {
	color: #FF6B6B;
}

.bill-date {
	font-size: 12px;
	color: #999;
	display: block;
}

.add-bill-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	z-index: 1000;
}

.modal-content {
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 32rpx;
	width: 100%;
	max-height: 85%;
	overflow-y: auto;
	box-sizing: border-box;
	min-height: 600rpx;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
}

.modal-title {
	font-size: 18px;
	font-weight: 600;
	color: #333;
}

.type-tabs {
	display: flex;
	background: #F5F5F5;
	border-radius: 12rpx;
	margin-bottom: 32rpx;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 16rpx;
	border-radius: 12rpx;
	transition: all 0.3s ease;
}

.tab-item.active {
	background: #6E7FF3;
	color: #fff;
}

.tab-item text {
	font-size: 14px;
	font-weight: 500;
}

.amount-input-section {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32rpx;
	padding: 0 16rpx;
	width: 100%;
	box-sizing: border-box;
	min-height: 60rpx;
}

.currency-symbol {
	font-size: 32px;
	font-weight: bold;
	color: #6E7FF3;
	margin-right: 12rpx;
	flex-shrink: 0;
	line-height: 1;
}

.amount-input {
	font-size: 30px;
	font-weight: bold;
	color: #333;
	text-align: center;
	border: none;
	outline: none;
	background: transparent;
	flex: 1;
	min-width: 0;
	padding: 8rpx 12rpx;
	box-sizing: border-box;
	overflow: visible;
	word-break: keep-all;
	white-space: nowrap;
	line-height: 1;
	height: 60rpx;
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24rpx;
	margin-bottom: 32rpx;
	min-height: 200rpx;
}

.grid-item {
	text-align: center;
	padding: 16rpx;
	border-radius: 12rpx;
	transition: all 0.3s ease;
}

.grid-item.selected {
	background: rgba(110, 127, 243, 0.1);
	border: 2px solid #6E7FF3;
}

.grid-icon {
	width: 64rpx;
	height: 64rpx;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12rpx;
}

.grid-name {
	font-size: 12px;
	color: #666;
	display: block;
}

.note-input {
	width: 100%;
	padding: 24rpx;
	border: 1px solid #E5E5E5;
	border-radius: 12rpx;
	font-size: 14px;
	margin-bottom: 32rpx;
	box-sizing: border-box;
	min-height: 80rpx;
	line-height: 1.5;
	background: #fff;
	word-break: break-word;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.modal-actions {
	display: flex;
	gap: 16rpx;
}

.cancel-btn,
.confirm-btn {
	flex: 1;
	padding: 24rpx;
	border-radius: 12rpx;
	font-size: 16px;
	font-weight: 500;
	border: none;
}

.cancel-btn {
	background: #F5F5F5;
	color: #666;
}

.confirm-btn {
	background: linear-gradient(135deg, #6E7FF3 0%, #8B9BFF 100%);
	color: #fff;
}

.budget-setting-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.budget-modal-content {
	background: #fff;
	border-radius: 24rpx;
	padding: 32rpx;
	width: 90%;
	max-width: 500rpx;
	box-sizing: border-box;
}

.budget-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
}

.budget-modal-title {
	font-size: 18px;
	font-weight: 600;
	color: #333;
}

.budget-input-section {
	margin-bottom: 32rpx;
}

.budget-input-label {
	font-size: 14px;
	color: #666;
	display: block;
	margin-bottom: 12rpx;
}

.budget-input-wrapper {
	display: flex;
	align-items: center;
	border: 1px solid #E5E5E5;
	border-radius: 12rpx;
	padding: 8rpx 12rpx;
}

.budget-currency-symbol {
	font-size: 28px;
	font-weight: bold;
	color: #6E7FF3;
	margin-right: 8rpx;
	flex-shrink: 0;
	line-height: 1;
}

.budget-input {
	font-size: 28px;
	font-weight: bold;
	color: #333;
	text-align: center;
	border: none;
	outline: none;
	background: transparent;
	flex: 1;
	min-width: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: visible;
	word-break: keep-all;
	white-space: nowrap;
	line-height: 1;
	height: 60rpx;
}

.budget-modal-actions {
	display: flex;
	gap: 20rpx;
	margin-top: 8rpx;
}

.budget-cancel-btn,
.budget-confirm-btn {
	flex: 1;
	padding: 28rpx 24rpx;
	border-radius: 16rpx;
	font-size: 16px;
	font-weight: 600;
	border: none;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.budget-cancel-btn {
	background: #F8F9FE;
	color: #666;
	border: 2px solid #E5E5E5;
}

.budget-cancel-btn:active {
	background: #F0F0F0;
	transform: scale(0.98);
}

.budget-confirm-btn {
	background: linear-gradient(135deg, #6E7FF3 0%, #8B9BFF 100%);
	color: #fff;
	box-shadow: 0 8rpx 24rpx rgba(110, 127, 243, 0.3);
}

.budget-confirm-btn:active {
	transform: scale(0.98);
	box-shadow: 0 4rpx 16rpx rgba(110, 127, 243, 0.4);
}

.bottom-nav {
	display: flex;
	background: #fff;
	border-top: 1px solid #F0F0F0;
	padding: 16rpx 0;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.nav-item {
	flex: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.nav-item text {
	font-size: 10px;
	color: #999;
}

.nav-item.active text {
	color: #6E7FF3;
}

.nav-item.add-btn {
	position: relative;
}

.add-icon {
	width: 64rpx;
	height: 64rpx;
	border-radius: 32rpx;
	background: linear-gradient(135deg, #6E7FF3 0%, #8B9BFF 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 16rpx rgba(110, 127, 243, 0.3);
}

.nav-item.add-btn text {
	color: #6E7FF3;
	font-weight: 500;
}

/* 统计页面样式 */
	.stats-page {
		flex: 1;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #F8F9FE 0%, #FFFFFF 100%);
	}

	.stats-content {
		flex: 1;
		overflow-y: auto;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.time-range-selector {
		display: flex;
		background: #F5F5F5;
		border-radius: 12rpx;
		margin-bottom: 32rpx;
		padding: 8rpx;
	}

	.range-item {
		flex: 1;
		text-align: center;
		padding: 16rpx;
		border-radius: 8rpx;
		font-size: 14px;
		color: #666;
	}

	.range-item.active {
		background: #6E7FF3;
		color: #fff;
	}

	.stats-overview {
		display: flex;
		gap: 24rpx;
		margin-bottom: 32rpx;
		margin-top: 20rpx;
	}

	.stats-card {
		flex: 1;
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
	}

	.stats-label {
		font-size: 14px;
		color: #999;
		display: block;
		margin-bottom: 8rpx;
	}

	.stats-amount {
		font-size: 24px;
		font-weight: bold;
		display: block;
	}

	.stats-amount.income {
		color: #58D68D;
	}

	.stats-amount.expense {
		color: #FF6B6B;
	}

	.chart-section {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 32rpx;
		position: relative;
	}

	.chart-detail {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgba(0, 0, 0, 0.8);
		border-radius: 12rpx;
		padding: 16rpx 24rpx;
		color: #fff;
		font-size: 14px;
		z-index: 10;
		white-space: nowrap;
	}

	.export-btn {
		background: #6E7FF3;
		color: #fff;
		border-radius: 8rpx;
		padding: 12rpx 24rpx;
		font-size: 14px;
		margin-bottom: 24rpx;
		text-align: center;
	}

	.expense-chart {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		height: 280rpx;
		margin-top: 32rpx;
	}

	.chart-bar {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}

	.bar-fill {
		width: 32rpx;
		border-radius: 16rpx 16rpx 0 0;
		transition: height 0.3s ease;
	}

	.bar-label {
		font-size: 12px;
		color: #999;
		transform: rotate(-45deg);
		transform-origin: center;
		white-space: nowrap;
	}

	/* 预算页面样式 */
	.budget-page {
		flex: 1;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #F8F9FE 0%, #FFFFFF 100%);
	}

	.budget-content {
		flex: 1;
		overflow-y: auto;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.budget-overview-card {
		background: linear-gradient(135deg, #6E7FF3 0%, #8B9BFF 100%);
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 32rpx;
		color: #fff;
	}

	.budget-title {
		font-size: 16px;
		opacity: 0.8;
		margin-bottom: 16rpx;
		display: block;
	}

	.budget-amount {
		font-size: 36px;
		font-weight: bold;
		margin-bottom: 32rpx;
		display: block;
	}

	.budget-progress {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 16rpx;
		padding: 24rpx;
	}

	.budget-categories {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
	}

	.budget-category-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border-radius: 12rpx;
		margin-bottom: 16rpx;
		transition: all 0.3s ease;
	}

	.budget-category-item.active {
		background: rgba(110, 127, 243, 0.1);
	}

	.category-info {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.category-budget {
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}

	/* 我的页面样式 */
	.profile-page {
		flex: 1;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #F8F9FE 0%, #FFFFFF 100%);
	}

	.profile-content {
		flex: 1;
		overflow-y: auto;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.profile-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 48rpx;
		padding-top: 32rpx;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		margin-bottom: 24rpx;
	}

	.username {
		font-size: 20px;
		font-weight: 600;
		color: #333;
	}

	.menu-list {
		background: #fff;
		border-radius: 16rpx;
		padding: 0 24rpx;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 32rpx 0;
		border-bottom: 1px solid #F5F5F5;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-icon {
		margin-right: 24rpx;
	}

	.menu-text {
		flex: 1;
		font-size: 16px;
		color: #333;
	}

	/* 缺省状态样式 */
	.empty-bills {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 32rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
	}

	.empty-icon {
		margin-bottom: 24rpx;
		opacity: 0.6;
	}

	.empty-text {
		font-size: 16px;
		color: #999;
		margin-bottom: 12rpx;
		display: block;
	}

	.empty-subtext {
		font-size: 12px;
		color: #CCC;
		display: block;
	}

	/* 统计页面缺省状态样式 */
	.empty-chart {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 32rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
		margin-top: 32rpx;
	}

	.empty-chart-icon {
		margin-bottom: 24rpx;
		opacity: 0.6;
	}

	.empty-chart-text {
		font-size: 16px;
		color: #999;
		margin-bottom: 12rpx;
		display: block;
	}

	.empty-chart-subtext {
		font-size: 12px;
		color: #CCC;
		display: block;
	}
</style>